<template>
    <div class="home-banner">
        <Carousel :list="list"/>
    </div>
</template>
<script>
export default {
    name: 'HomeBanner'
}
</script>
<script setup>
import {getBanner} from '@/api/home'
import { ref, onMounted } from 'vue';

const list = ref([])
onMounted(async ()=> {
    const res = await getBanner()
    list.value = res.result
})

</script>
<style scoped lang="scss">
.home-banner {
    width: 1240px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;

    z-index: 98;
    .carousel {
        :deep(.carousel-btn.prev){
            left: 270px;
        }

        :deep(.carousel-indicator){
            padding-left: 250px;
        }
    }
}
</style>